<template>


  <div>

    <el-form :model="userSearchForm" ref="userAddForm" :inline="true">
      <el-form-item label="姓名">
        <el-input placeholder="搜索姓名" v-model="userSearchForm.keyword" size="medium" prefix-icon="el-icon-search"
                  clearable>
        </el-input>
      </el-form-item>

      <el-form-item label="生日">
        <el-date-picker v-model="userSearchForm.birthday" type="date" placeholder="选择生日" size="medium"></el-date-picker>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="showAddUserDialog" size="medium">搜索</el-button>

      <el-button type="primary" icon="el-icon-plus" @click="showAddUserDialog" size="medium">添加用户</el-button>
    </el-form>

    <!--table表单-->
    <!--stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。-->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"

    >
      <el-table-column
        prop="id"
        label="编号"
        width="140">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名字"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="300">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="360">
      </el-table-column>
      <el-table-column label="操作">
        <!--编辑和删除 按钮自定义-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>


    </el-table>
    <!--分页条
      total 44条数据
      pageSize：10
    -->
    <el-pagination
      align="right"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryParam.pageSize"
      :current-page="queryParam.currentPage"
      @current-change="currentChange"
    >
    </el-pagination>

  </div>

</template>

<script>
  export default {
    name: 'Dept',
    data() {// 组件内部取值
      return {
        tableData: [],
        queryParam: {
          /*自定义当前页数和分页页数*/
          currentPage: 1,
          pageSize: 10
        },
        userSearchForm: {
          keyword: "请输入",
          birthday: "",
        },

        total: 0
      }
    },
    methods: {
      currentChange(currentPage) {
        this.queryParam.currentPage = currentPage;//改变查询条件
        this.getDepartments();//主动触发查询
      },
      getDepartments() {
        /*if(currentPage){
          this.queryParam.currentPage = currentPage;  这个可以
           是传值过来 如果没有传值就是第一次加载页面
          如果传值代表是把分页的数据带过来 从而进行页面的跳转
        }*/
        this.$http.post("/wsh/list", this.queryParam)
          .then(result => {
            console.log(result);
            /*进行赋值 从大变小 提取到data中*/
            result = result.data;//PageList
            /*把大太大中的row赋值到tableData中 从而显示tableData*/
            this.tableData = result.rows;
            /*获取总条数 方便进行分页*/
            this.total = result.total;
          })
          .catch(result => {
            console.log(result);
            this.$message({
              /*如果错误则：...........*/
              type: 'error',
              message: "系统繁忙，稍后重试！！"
            });
          })
      },
      handleDelete(row) {
        let _this = this;
        this.$confirm('你确定要继续进行删除嘛？？？？？？',
          {
            confirmButtonText: '狠心删除',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            let userId = row.id;
            _this.$http.delete("/wsh/del", {"id": userId})
              .then(res => {
                console.log(res);
                if (res.data.success) {
                  this.$message({showClose: true, message: '删除成功', type: 'success', offset: 300});
                  _this.loadTableData();
                } else {
                  this.$message({
                    showClose: true,
                    message: '删除失败[ ' + res.data.message + " ]",
                    type: 'error',
                    offset: 300
                  });
                }
              }).catch(error => {
            })


          })

      }
    },
    mounted() {
      /*钩子函数 页面加载之后触发*/
      /*调用方法 页面加载之后的数据*/
      this.getDepartments();


    }
  }
</script>

<style scoped>

</style>
